// displays
$displays = block flex inline inline-block inline-flex

for display in $displays
  +prefix-classes('ui-')
    .{camelize(display)}
      display display

.ui-clearfix
  clearfix()

// utilities
/**
 * utility name class prefixed white .ui
 * use example:
 *   utility(borderRaidus2, border-radius 2px)
 *   utility(borderRaidus2, border-radius 2px, border 1px solid black)
 *   utility(borderRaidus2, 'border-radius 2px')
 *   utility(borderRaidus2, 'border-radius 2px, border 1px solid black')
 */
utility(class, props...)
  +prefix-classes('ui-')
    .{class}
      if type(props) == 'string'
        props = split(', ', props)
        for prop in props
          prop = split(' ', prop)
          {prop[0]} s(slice(prop, 1))!important
      else
        for prop in props
          {prop[0]} slice(prop, 1)!important

$utilities = {
  // colors
  primary: color $primary
  highLight: color $highLight
  blackLight: color $blackLight
  background: color $background
  blackLighter: color $blackLighter

  onSaleCompare: color #666666
  white: color #fff
  lightRed: color #F23636
  PayRed: color #F23030
  vipFont: color #D0A26B

  // height
  height50: height 50px
  height70: height 70px

  height270: height 270px
  height100: height 100px

  //padding
  padding10: padding 10px
  padding15: padding 15px

  paddingTop10: padding-top 10px
  paddingTop20: padding-top 20px

  paddingBottom0: padding-bottom 0px
  paddingBottom30: padding-bottom 30px
  paddingBottom50: padding-bottom 50px
  paddingBottom84: padding-bottom 84px

  //line-height
  lineHeight22: line-height 22px
  lineHeight17: line-height 17px
  lineHeight15: line-height 15px
  lineHeight12: line-height 12px
  lineHeight11: line-height 11px

  // font
  fontSize9: font-size 9px
  fontSize10: font-size 10px
  fontSize11: font-size 11px
  fontSize12: font-size 12px
  fontSize13: font-size 13px
  fontSize14: font-size 14px
  fontSize15: font-size 15px
  fontSize16: font-size 16px
  fontSize17: font-size 17px
  fontSize18: font-size 18px
  fontSize20: font-size 20px
  fontSize22: font-size 22px
  fontSize25: font-size 25px
  fontSize35: font-size 35px
  fontSize30: font-size 30px
  fontSize40: font-size 40px
  fontSize50: font-size 50px

  fontWeightBold: font-weight bold

  // content
  textAlignCenter: text-align center

  //vertical-align
  verticalAlign: vertical-align middle

  //text-decoration
  decoration: text-decoration none

  // borderRadius
  borderRadius2: border-radius 2px

  // color
  brown: color #94642A
  black: color #333
  wordColor: color #CC0D0D
  border: color $border
  blackLighter: color $blackLighter
  purple: color $purple
  darkRed: color $darkRed
  blackLight: color $blackLight
  whiteThree: color $whiteThree
  red: color #CC1010
  pink: color #F23030
  reduce: color #DB0909
  orange: color #ffaf50

  //lineHeight
  lineHeight50: line-height 50px


  // margin
  marginTop2: margin-top 2px
  marginTop4: margin-top 4px
  marginTop5: margin-top 5px
  marginTop7: margin-top 7px
  marginTop8: margin-top 8px
  marginTop10: margin-top 10px
  marginTop12: margin-top 12px
  marginTop13: margin-top 13px
  marginTop15: margin-top 15px
  marginTop18: margin-top 18px
  marginTop20: margin-top 20px
  marginTop22: margin-top 22px
  marginTop25: margin-top 25px
  marginTop30: margin-top 30px
  marginTop35: margin-top 35px
  marginTop40: margin-top 40px
  marginTop44: margin-top 44px
  marginTop50: margin-top 50px
  marginTop60: margin-top 60px
  marginTop70: margin-top 70px
  marginTop80: margin-top 80px
  marginTop100: margin-top 100px
  marginTop160: margin-top 160px

  marginLeft2: margin-left 2px
  marginLeft3: margin-left 3px
  marginLeft4: margin-left 4px
  marginLeft5: margin-left 5px
  marginLeft7: margin-left 7px
  marginLeft10: margin-left 10px
  marginLeft12: margin-left 12px
  marginLeft13: margin-left 13px
  marginLeft15: margin-left 15px
  marginLeft18: margin-left 18px
  marginLeft20: margin-left 20px
  marginLeft25: margin-left 25px
  marginLeft30: margin-left 30px
  marginLeft40: margin-left 40px
  marginLeft50: margin-left 50px
  marginLeft70: margin-left 70px

  marginRight2: margin-right 2px
  marginRight5: margin-right 5px
  marginRight7: margin-right 7px
  marginRight10: margin-right 10px
  marginRight13: margin-right 13px
  marginRight15: margin-right 15px
  marginRight18: margin-right 18px
  marginRight25: margin-right 25px

  marginBottom3: margin-bottom 3px
  marginBottom5: margin-bottom 5px
  marginBottom8: margin-bottom 8px
  marginBottom10: margin-bottom 10px
  marginBottom12: margin-bottom 12px
  marginBottom15: margin-bottom 15px
  marginBottom22: margin-bottom 22px
  marginBottom25: margin-bottom 25px
  marginBottom32: margin-bottom 32px
  marginBottom50: margin-bottom 50px
  marginBottom60: margin-bottom 60px

  bottom54: bottom 54px
  bottom104: bottom 104px
  bottom84: bottom 84px
  bottom138: bottom 138px

  marginAuto: margin 0 auto
  textAlignLeft: text-align left
  // flex
  flex1: flex 1
  justifyContentCenter: justify-content center
  justifyContentEnd: justify-content flex-end
  justifyContentSpaceBetween: justify-content space-between
  alignItemsCenter: align-items center
  justifyContentBetween: justify-content space-between
  flexCenter: 'align-items center, justify-content center'
  alignItemsStart: align-items flex-start

  // text-decoration
  decorationLineThrough: text-decoration line-through

}

for class, props in $utilities
  utility(class, props)
